<script setup lang="ts">
import { onMounted, ref, toRaw, watch } from "vue";
import Searchbox from "@/views/components/searchbox/Searchbox.vue";
import BaseComponent from "@/views/configs/deviceGroupConfig/component/base.vue";
import LocateSetComponent from "@/views/configs/deviceGroupConfig/component/locateSet.vue";
import { useRoute } from "vue-router";
import { useLogic } from "@/views/system/user/logic/logic";
import { getDeviceGroupOptionsApi } from "@/api/products/deviceGroup";
import { handleTree } from "@/utils/tree";
import { useUserStore } from "@/store/modules/user";
import { storeToRefs } from 'pinia';
import { useI18n } from "vue-i18n";

const RouteName = "group-config"
defineOptions({
  name: RouteName,
});

const {t} = useI18n()

const selected = ref(0);
const route =  useRoute()
function tabClick({ index }) {
  selected.value = index;
}

const deviceGroupOptions = ref([]);
const {deptTreeList,getDeptTree}  = useLogic()
onMounted(async () => {
  await getDeptTree()
  const deviceGroupOptionsRes = await getDeviceGroupOptionsApi()
  if(deviceGroupOptionsRes.code == 0){
    deviceGroupOptions.value = handleTree(deviceGroupOptionsRes.data.options);
  }
})

const listComponents = [
  {
    key: "BaseComponent",
    title: "基础设置",
    component: BaseComponent
  },
  {
    key: "LocateSetComponent",
    title: "定位设置",
    component: LocateSetComponent
  },
];

const storeInfo = useUserStore()
const {deptId}= storeToRefs(storeInfo)
console.log(deptId.value)
const forceRefresh = ref(0);
const searchParams = ref({
  deviceGroupId: route.query.deviceGroupId ? Number(route.query.deviceGroupId) : 0,
  deptId: deptId.value,
})
const searchFields = ref(  [
  {
    prop: 'deviceGroupId',
    name: t('datacenter.iotdataPage.deviceGroup'),
    type: 'cascader',
    cascaderOptions: deviceGroupOptions,
    ops: {
      valueField: 'id',
      labelField: 'name',
      emitPath: false,
      checkStrictly: true
    },
  },
  {
    prop: 'deptId',
    name: t('datacenter.iotdataPage.dept'),
    type: 'cascader',
    cascaderOptions: deptTreeList,
    clearable: true,
    isHidden: false,
    ops: {
      valueField: 'id',
      labelField: 'name',
      emitPath: false,
      checkStrictly: true
    }
  },
])

const handleChange = (e:any) => {
  console.log(e)
  Object.keys(e).forEach(key => {
    searchParams.value[key] = e[key];
  });
}

const handleSearch = (e:any) => {
  console.log(e)
  Object.keys(e).forEach(key => {
    searchParams.value[key] = e[key];
  });
  forceRefresh.value = Math.random()
}

const handleReset = (e:any) => {
  console.log(e)
}

// 修正参数类型转换逻辑
const deviceGroupId = ref(Number(route.query.deviceGroupId) || 0);

watch(() => route.query, (newVal) => {
  console.log(route.name)
  console.log(newVal)
  if(route.name==RouteName && newVal){
    deviceGroupId.value = newVal.deviceGroupId ? Number(newVal.deviceGroupId) : 0;
    searchParams.value.deviceGroupId = deviceGroupId.value;
    forceRefresh.value = Math.random();
    if(newVal.destination == "locateSet"){

    }
  }
}, { immediate: true,deep: true });

</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <Searchbox
          :fields= searchFields
          :initialValues="searchParams"
          :maxVisibleFields=3
          @change="handleChange"
          @search="handleSearch"
          @reset="handleReset"
        />
      </div>
    </template>

    <el-tabs @tab-click="tabClick" >
      <template v-for="(item, index) of listComponents" :key="item.key">
        <el-tab-pane :lazy="true">
          <template #label>
            <span
              v-tippy="{
                maxWidth: 'none',
                content: `${item.title}`
              }"
            >
              {{ item.title }}
            </span>
          </template>
          <keep-alive>
            <component :is="item.component"
                       :key="item.key"
                       v-show="selected == index"
                       :params="searchParams"
                       :forceRefresh="forceRefresh"/>
          </keep-alive>
        </el-tab-pane>
      </template>
    </el-tabs>

  </el-card>
</template>

<style scoped lang="scss">

</style>





